<template>
  <div id="hotel1">
      <div class="hotel-box">
      <!-- 头部 -->
        <div class='header-container'>
            <div class='header'>
                <div class='header-logo'>
                    <div class="left-header"><h1>逛逛民宿</h1></div>
                    <div class="right-header">
                        <router-link to="/login" class="login" v-if="this.userIds == null">立马登录</router-link>
                        <div class='listed' v-if="this.userIds != null">
                            <router-link to="/personal" class='user-up'>{{this.userName}}</router-link>
                            <button  class='extra-entry' @click='loginOut'>退出</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 搜索框 -->
        <div class="slick">
            <div class="track">
                <!-- 轮播图 -->
                <div class="block">
                    <el-carousel trigger="click" height="150px">
                        <el-carousel-item v-for="item in 4" :key="item">
                            <h3 class="small">{{ item }}</h3>
                        </el-carousel-item>
                    </el-carousel>
                    <!-- 搜索 -->
                    <div class="search-bar">
                        <div class="form-wrap">
                            <form action="" class='searchForm'>
                                <div class="address">
                                    <span class="flex-center">河南</span>
                                </div>
                                <el-input v-model="input" placeholder="请输入店铺名称" class='slot'></el-input>
                                <el-button type="primary" class='scan' style="padding:13px 20px">
                                    <router-link :to="{
                                        path:'/search',
                                        query:{
                                            content:input
                                        }
                                    }">搜索</router-link></el-button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 推荐的酒店 -->
        <div class="homePage">
            <div class="home">
                <div class="rs-container">
                    <div class="pin"><h1>品牌民宿</h1></div>
                    <House/>
                </div>
            </div>
        </div>
        <!-- 尾部 -->
        <HFooter/>
        <Foot/>
    </div>
  </div>
</template>
<script>
import House from '../components/ld/H-house.vue'
import HFooter from '../components/ld/H-footer.vue'
import Foot from '../components/ld/footer.vue'
import cookie from '../cookie/index'
import jwtDecode from 'jwt-decode'
export default {
  name: 'Hotel',
  components: {
    House,
    HFooter,
    Foot
  },
  data(){
      return{
          userIds:null,
          userName:null,
          input:''
      }
  },
  mounted(){
        this.userIds = jwtDecode(cookie.getToken()).userId;
        this.userName = jwtDecode(cookie.getToken()).userNickname
  },
  methods:{
        //    退出登录
        loginOut(){
            this.$confirm('是否确定退出登录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url:'/shops/login_and_register/basic/logout',
                    method:'POST',
                    headers:{
                        'Authorization':cookie.getToken()
                    }
                }).then(data => {
                    if(data.data.code === 200){
                        this.$message({
                            type: 'success',
                            message: '退出成功!'
                        });
                        this.$router.push({ name:'login' })
                        cookie.removeToken()
                    }
                }).catch(err => {
                    console.log(err);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退出'
                });          
            });
        }
    }
}
</script>
<style  lang="less" scoped>
  *{
    padding: 0;
    margin: 0;
  }
  .all{
        margin: 0 auto; 
    }
    .hotel1{
        width: 100%;
        position: absolute;
    }
    .hotel-box{
        width: 1260px;
        margin: 0 auto;
    }
    // 头部
    .header-container{
        width: 100%;
        position: relative;
        background: #fff;
        .header{
            margin: 0 auto;
            height: 70px;
            line-height: 70px;
            .header-logo{
                width: 94%;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                .left-header{
                    width: 142px;
                    height: 70px;
                }
                .right-header{
                    .login{
                        text-decoration: none;
                        color: #585858;
                    }
                    .listed{
                        margin-left: 15px;
                        a{
                            text-decoration: none;
                            font-size: 14px; 
                            cursor: pointer;
                        }
                        .user-up{
                            color:#007bff;
                            margin-right: 10px;
                            cursor: pointer;
                        }
                        .extra-entry{
                            color: #666;
                            outline: none;
                            border: none;
                            cursor: pointer;
                            background: transparent;
                        }
                    }
                }
            }
        }
    }
    // 搜索框
    .slick{
        width: 100%;
        .track{
            margin: 0 auto;
            position: relative;
            .block{
                width: 100%;
                position:relative;
            }
            .search-bar{
                position: absolute;
                left: 50%;
                bottom: 0;
                margin: 30px 0;
                transform: translateX(-50%);
                z-index: 999;
                // justify-content: center;
                .form-wrap{
                    // position: fixed;
                    background: #fff;
                    border-radius: 8px;
                    font-size: 14px;
                    padding: 10px 0;
                    // position: relative;
                    .searchForm{
                        display: flex;
                        margin: 0 auto;
                        .slot{
                            margin-right: 20px;
                        }

                    }
                    .address{
                        text-align: center;
                        display: inline-block;
                        width: 200px;
                        line-height: 40px;
                    }
                    .scan{
                        margin-right: 30px;
                    }
                }
            }
        }
    }
    // 推荐的酒店
    .homePage{
        width: 100%;
        background: #f5f6fa;
        padding: 30px 0;
        .home{
            margin: 0 auto;
            padding: 0 24px;
            .pin{
                margin-bottom: 14px;
            }
        }
    }
</style>
